<template>
  <div class="mod-user">
    <!-- 常用网站后台页面 -->
    <el-form class="policyForm">
      <!-- <el-form-item>
        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-input :clearable="true" class="inputcss" v-model="input" placeholder="请输名称查询"></el-input>
        <el-button @click="clickInquire()">查询</el-button>
        <el-button @click="clickGetData()">重置</el-button>
        <el-button type="primary" plain v-if="isAuth('sys:policy:save')" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>

 <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="name"
      label="名称"
      align="center"
      width="280">
    </el-table-column>
    <el-table-column
      prop="typeName"
      label="分类"
      align="center"
      width="280">
    </el-table-column>
    <el-table-column
      prop="path"
      label="路径"
      align="center"
      min-width="280">
    </el-table-column>
    <el-table-column
      prop="orderNum"
      align="center"
      label="排序">
    </el-table-column>
    <el-table-column
      prop="statusFlag"
      align="center"
      label="状态">
      <template slot-scope="scope">
        <span v-if="scope.row.statusFlag == 0">有效</span>
        <span v-if="scope.row.statusFlag == 1">无效</span>
      </template>
    </el-table-column>

    <el-table-column
      label="操作"
      align="center"
      width="150">
      <template slot-scope="scope">
        <el-button @click="handleClickModification(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="handleClickDelete(scope.row.id)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>

  </el-table>


  <el-dialog
  v-if="policyCenterDialogVisible"
  title="新增"
  :visible.sync="policyCenterDialogVisible"
  width="60%"
  >
  <span>
    <!-- 表单 -->
  <el-form :model="ruleForm" :rules="ruleRule" status-icon ref="ruleForm" label-width="150px" class="demo-ruleForm formA">
   <el-form-item v-show="!isEdit" label="类型">
  <el-radio v-model="ruleForm.type" :label="1">分类</el-radio>
  <el-radio v-model="ruleForm.type" :label="2">网站</el-radio>
  </el-form-item>
  <el-form-item v-if="ruleForm.type == 1" label="分类名称" prop="name" key="2">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>


  <el-form-item v-if="ruleForm.type == 2" label="分类名称" prop="typeCode">
    <el-select class="selectA" v-model="ruleForm.typeCode" placeholder="请选择">
    <el-option
      v-for="item in optionsA"
      :key="item.typeCode"
      :label="item.typeName"
      :value="item.typeCode">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item  v-if="ruleForm.type == 2" label="网站名称" prop="name" key="1">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item v-if="ruleForm.type == 2" label="网站路径" prop="path">
    <el-input v-model="ruleForm.path"></el-input>
  </el-form-item>

  <el-form-item label="排序">
    <el-input-number v-model="ruleForm.orderNum" :min="0" :max="10" label="排序"></el-input-number>
  </el-form-item>
  <el-form-item label="状态">
      <el-select class="selectA" v-model="ruleForm.statusFlag" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
  </el-form-item>

</el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="clickFalseLink">取 消</el-button>
    <el-button type="primary" plain @click="clickNewlyLink()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isEdit: false,
      policyCenterDialogVisible: false,
      ruleForm: {
        id: 0,
        name: '',
        typeCode: '',
        type: 2,
        path: '',
        statusFlag: 0,
        orderNum: 0,
        deleteId: 0
      },

      tableData: [],
    //  tableData: [{
    //       id: 3,
    //       /* 父集名称 */
    //       title: '注册证书查询',

    //     // 子集
    //       children: [{
    //           id: 31,
    //           /* 子集名称 */
    //           title: '注册建筑师查询',
    //           /* 子集分类 */
    //           classify:'分类',
    //           /* 子集路径 */
    //           url: 'https//baidu.com',
    //           /* 子集排序 */
    //           sort:1,
    //           /* 子集状态 */
    //           state: 1
    //         }, {
    //           id: 31,
    //           /* 子集名称 */
    //           title: '注册建筑师查询',
    //           /* 子集分类 */
    //           classify:'分类',
    //           /* 子集路径 */
    //           url: 'https//baidu.com',
    //           /* 子集排序 */
    //           sort:1,
    //           /* 子集状态 */
    //           state: 1
    //       }]
    //     }],

      options: [
        {
          id: 0,
          name: '有效'
        },
        {
          id: 1,
          name: '无效'
        }
      ],
      optionsA: [],

      ruleRule: {
        name: [
          { required: true, message: '请填写名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请填写网站路径', trigger: 'blur' }
        ],
        typeCode: [
        { required: true, message: '请选择分类', trigger: 'blur' }
        ]

      },
      input: '',
  // 当前页数
      pageIndex: 1,
  // 每页条数
      pageSize: 10,
      totalCount: 0
  // isPics: true,
    }
  },
  components: {
  // PolicyType
  },
  created () {
    this.getPolicyList()
  },
  watch: {
    policyCenterDialogVisible: {
      handler (val) {
        if (!val) {
          this.resetForm()
        }
      }
    }
  },
  methods: {
    addOrUpdateHandle () {
      this.getName()
      this.policyCenterDialogVisible = true
      this.isEdit = false
    },
    handleChange () {
      console.log(123)
    },
    clickFalseLink () {
      this.policyCenterDialogVisible = false
      this.$refs.ruleForm.resetFields()
    },
    getName () {
      this.$http({
        url: this.$http.adornUrl(`/toolbox/website/types`),
        method: 'get'
      }).then(({data}) => {
        if (data.code === 0) {
          this.optionsA = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  // 重置
    clickGetData () {
      this.input = ''
      this.clickInquire()
    },
  // 查询
    clickInquire () {
      this.getPolicyList()
    },
  // 新增的确定
    clickNewlyLink () {
      if (!this.isEdit) {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/toolbox/website/add`),
              method: 'post',
              data: this.$http.adornData({
                'name': this.ruleForm.name,
                'type': this.ruleForm.type,
                'typeCode': this.ruleForm.typeCode,
                'path': this.ruleForm.path,
                'orderNum': this.ruleForm.orderNum,
                'statusFlag': this.ruleForm.statusFlag
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '添加成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.policyCenterDialogVisible = false
                    this.getPolicyList()
                    // this.$emit('refreshDataList')
                    this.$refs.ruleForm.resetFields()
                  }
                })
                this.$refs.ruleForm.resetField()
              } else {
                this.$message.error(data.msg)
                // this.$refs.ruleForm.resetFields()
              }
            })
          }
        })
      } else {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/toolbox/website/edit`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.ruleForm.id,
                'name': this.ruleForm.name,
                'type': this.ruleForm.type,
                'typeCode': this.ruleForm.typeCode,
                'path': this.ruleForm.path,
                'orderNum': this.ruleForm.orderNum,
                'statusFlag': this.ruleForm.statusFlag
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.policyCenterDialogVisible = false
                    this.getPolicyList()
                    // this.$emit('refreshDataList')
                    this.$refs.ruleForm.resetFields()
                  }
                })
                this.$refs.ruleForm.resetField()
              } else {
                this.$message.error(data.msg)
                this.$refs.ruleForm.resetFields()
              }
            })
          }
        })
      }
    },
  // 获取数据
    getPolicyList () {
      this.$http({
        url: this.$http.adornUrl(`/toolbox/website/list`),
        method: 'post',
        data: this.$http.adornData({
          'name': this.input
        })
      }).then(({data}) => {
        if (data.code === 0) {
          this.tableData = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },

  // 删除
    handleClickDelete (id) {
      this.$confirm(`确定要${id ? '删除' : '批量删除'}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/toolbox/website/delete/` + id),
          method: 'get'
        }).then(({data}) => {
          if (data.code === 0) {
            this.$message.success('删除成功')
            this.getPolicyList()
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {})
    },
   /* 修改 */
    handleClickModification (row) {
  //  console.log(id);
      this.getName()
      this.isEdit = true
      this.policyCenterDialogVisible = true
      this.ruleForm = {...this.ruleForm, ...row}
    },
    resetForm () {
      this.ruleForm = {
        id: 0,
        name: '',
        typeCode: '',
        type: 2,
        path: '',
        statusFlag: 0,
        orderNum: 0
      }
    }

  }
}
</script>
<style scoped lang="scss">
  .inputcss{
  width: 300px;
  margin-right: 5px;
  }
  .policyForm{
    margin-top: 10px;
  }
  .mod-user{
    padding: 15px;
}

/deep/.el-dialog__wrapper{
.el-dialog{
.el-dialog__header{
    font-weight: bold;
    padding-bottom:20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
}

}
.formA{
    padding-right: 100px !important;
}
.selectA{
    width: 100% !important;
}
</style>
